<!DOCTYPE HTML>
<html>
<head>
<title>模拟员工信息管理系统</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
	body{font-family: "微软雅黑"}
	h2, h4{ text-align: center; }
	div#box1, div#box2 {text-align:center;}
	hr{margin: 20px 0;}
	table{margin: 0 auto;width:70%;text-align: center;border-collapse:collapse;}
	td, th{padding: 7px; width:20%;}
	th{background-color: #DCDCDC;}
	input[type='text']{width:130px;}
</style>
<!--引入jquery的js库-->
<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
	/* --- 添加一个新员工 --- */
	function addEmp(){
		//1、获取要添加的员工信息
		var id = $("#box1 input[name='id']").val();
		var name = $("#box1 input[name='name']").val();
		var email = $("#box1 input[name='email']").val();
		var salary = $("#box1 input[name='salary']").val();
		// debugger;/* 断点调试,调试完后要去掉，要不然程序会卡在这里 */
		
		// 2、校验数据
		// 2.1、添加的员工信息不能为空(若为空，则不添加)
		if (id == "" || name == "" || email == "" || salary == "") {
			alert("数据不能为空");
			return;/* 提前结束当前函数的执行 */
		}
		
		// 2.2、判断id是否存在
		/* var ids = $("tr:gt(0) td:eq(1)");
		for (var i = 0; i < ids.length; i++) {
			if (id == ids[i].innerText) {
				alert("id重复");
				return;
			}
		} */
		
		// each()函数
		$("tr:gt(0) td:eq(1)").each(function(i, e){
			if (id == e.innerText) {
				alert("id重复");
			}
		});
		
		//2、将员工的信息(以tr行的形式)添加到页面上
		// 2.1、创建一个tr行
		var tr = $("<tr></tr>");
		// 2.2、创建5个td,并给td设置内容(复选框, id, 姓名, 邮箱, 工资)
		tr.append("<td><input type='checkbox' /></td>");
		tr.append("<td>" + id + "</td>");
		tr.append("<td>" + name + "</td>");
		tr.append("<td>" + email + "</td>");
		tr.append("<td>" + salary + "</td>");
		// 2.3、将tr添加到table中
		$("table").append(tr);
	}
	/* --- 删除选中的员工 --- */
	function delEmp(){
		
	}
	/* 点击全选设置 员工所在的行全选或者全不选 */
	function checkAll(){
		
	}
	/* --- 修改指定id的员工 --- */
	function updEmp(){
		
	}
</script>
</head>

<body>
<h2>添加新员工</h2>
<div id="box1">
	ID：<input type="text" name="id"/>
	姓名：<input type="text" name="name"/>
	邮箱：<input type="text" name="email"/>
	工资：<input type="text" name="salary"/>
	<input type="button" onclick="addEmp()" id="add" value="添加新员工"/>
</div>
<hr/>
<table border="1">
	<tr>
		<th>
			<!-- 全选复选框 -->
			<input type="checkbox" onclick="checkAll()" id="all"/>
		</th>
		<th>ID</th>
		<th>姓名</th>
		<th>邮箱</th>
		<th>工资</th>
	</tr>
	<tr>
		<td>
			<input type="checkbox"/>
		</td>
		<td>1</td>
		<td>宋江</td>
		<td>sj@163.com</td>
		<td>12000</td>
	</tr>
	<tr>
		<td>
			<input type="checkbox"/>
		</td>
		<td>2</td>
		<td>武松</td>
		<td>ws@163.com</td>
		<td>10500</td>
	</tr>
	<tr>
		<td>
			<input type="checkbox"/>
		</td>
		<td>3</td>
		<td>孙二娘</td>
		<td>sen@163.com</td>
		<td>11000</td>
	</tr>
</table>
<h4><a href="javascript:void(0)" onclick="delEmp()" id="del">删除选中员工</a></h2>
<hr/>

<div id="box2">
	ID：<input type="text" name="id"/>
	姓名：<input type="text" name="name"/>
	邮箱：<input type="text" name="email"/>
	工资：<input type="text" name="salary"/>
	<input type="button" onclick="updEmp()" id="upd" value="根据ID修改员工信息"/>
</div>
</body>
</html>



